<link rel="import" href="g-overlay.html">
<link rel="import" href="animation/g-animation.html">
<link rel="import" href="animation/g-animation-group.html">
<link rel="import" href="animation/g-fadein.html">
<link rel="import" href="animation/g-fadeout.html">
<polymer-element name="g-overlay-webanimations" extends="g-overlay">
  <link rel="stylesheet" href="css/g-overlay.css">
  <link rel="stylesheet" polymer-scope="global" href="css/g-overlay-global.css">
  <template>
    <style>
      @host {
        .revealed {
          opacity: 0;
        }
      }
    </style>
    <g-animation-group id="scale" duration="0.218" on-complete="completeOpening">
      <g-animation duration="0.218">
        <g-property name="transform">
          <g-keyframe value="scale(1.05)"></g-keyframe>
          <g-keyframe value="scale(1.0)"></g-keyframe>
        </g-property>
        <g-property name="visibility">
          <g-keyframe value="hidden"></g-keyframe>
          <g-keyframe value="visible"></g-keyframe>
        </g-property>
      </g-animation>
      <g-fadein duration="0.218"></g-fadein>
    </g-animation-group>
    <g-animation-group id="slideUp" duration="0.4">
      <g-animation duration="0.4">
        <g-property name="transform">
          <g-keyframe value="translateY(0)"></g-keyframe>
          <g-keyframe value="translateY(-100%)"></g-keyframe>
        </g-property>
      </g-animation>
      <g-fadeout duration="0.4"></g-fadeout>
    </g-animation-group>
    <g-animation-group id="shakeFadeIn" duration="0.5">
      <g-animation duration="0.5">
        <g-property name="transform">
          <g-keyframe offset="0" value="translateX(0)"></g-keyframe>
          <g-keyframe offset="0.1" value="translateX(-50px)"></g-keyframe>
          <g-keyframe offset="0.3" value="translateX(50px)"></g-keyframe>
          <g-keyframe offset="0.5" value="translateX(-25px)"></g-keyframe>
          <g-keyframe offset="0.7" value="translateX(25px)"></g-keyframe>
          <g-keyframe offset="0.9" value="translateX(-13px)"></g-keyframe>
          <g-keyframe offset="1" value="translateX(0)"></g-keyframe>
        </g-property>
        <g-property name="visibility">
          <g-keyframe value="hidden"></g-keyframe>
          <g-keyframe value="visible"></g-keyframe>
        </g-property>
      </g-animation>
      <g-fadein duration="0.5"></g-fadein>
    </g-animation-group>
    <g-animation-group id="shakeFadeOut" duration="0.5">
      <g-animation duration="0.5">
        <g-property name="transform">
          <g-keyframe offset="0" value="translateX(0)"></g-keyframe>
          <g-keyframe offset="0.1" value="translateX(-50px)"></g-keyframe>
          <g-keyframe offset="0.3" value="translateX(50px)"></g-keyframe>
          <g-keyframe offset="1" value="translateX(-100%)"></g-keyframe>
        </g-property>
        <g-property name="opacity">
          <g-keyframe value="1"></g-keyframe>
          <g-keyframe value="0"></g-keyframe>
        </g-property>
      </g-animation>
      <g-fadeout duration="0.5"></g-fadeout>
    </g-animation-group>
    <content></content>
  </template>
  <script>
    Polymer('g-overlay-webanimations', {
      publish: {
        animation: 'scale-slideup'
      },
      ready: function() {
        this.$.scale.target = this;
        this.$.slideUp.target = this;
        this.$.shakeFadeIn.target = this;
        this.$.shakeFadeOut.target = this;
        this.animationChanged();
      },
      animationChanged: function() {
        if (this.animation == 'scale-slideup') {
          this.openAnimation = this.$.scale;
          this.closeAnimation = this.$.slideUp;
        } else if (this.animation == 'shake') {
          this.openAnimation = this.$.shakeFadeIn;
          this.closeAnimation = this.$.shakeFadeOut;
        }
      },
      renderOpened: function() {
        this.classList.add('revealed');
        if (this.opened) {
          this.openAnimation.play();
        } else {
          this.closeAnimation.play();
        }
      },
      openedAnimationStart: function(e) {
      },
      openedAnimationEnd: function(e) {
      },
      openedTransitionEnd: function(e) {
      }
    });
  </script>
</polymer-element>
